<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>

<script>

    // ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决引用外面变量的问题
    // 在ES6中，加入了let，let它是由for与if的块级作用域的

    // ES5中var是没有块级作用域的
    // ES6中let是有块级作用域的

    // 1. 变量作用域：变量在什么范围内是可用的
    {
        var name = 'shifeng';
        console.log("feng "+name);
    }
    console.log(name);


    // 2. 没有块级作用域会引起的问题 : if
    var func;
    if(true)
    {
        var name = "why";
        func = function ()
        {
            // alert("for " + name);
            console.log(name)
        }
    }
    // 中途被修改
    name = "kobe";
    func();

    
    // 3. 没有块级作用域引起的问题 ： for 的块级
    // var btns = document.getElementsByTagName('button');
    // for (var i = 0; i < btns.length; i++)
    // {
    //     // 问题代码
    //     // btns[i].addEventListener('click', function ()
    //     // {
    //     //     console.log("第"+ i+1 + "个按钮被点击");
    //     // })

    //     // 闭包解决问题： 函数范围之内是有作用域的，传入1就是1不会被修改
    //     (function (i) {
    //         btns[i].addEventListener('click', function ()
    //         {
    //             console.log("第"+ i+1 + "个按钮被点击");
    //         })
    //     })(i)
    // }

    // ES6写法
    const btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++)
    {
        btns[i].addEventListener('click', function()
        {
            console.log("第" + (i+1)+ "个按钮被点击");
        })
    }

</script>
    
</body>
</html>